import React from "react";

import {useHistory} from 'react-router-dom';
import {Card} from "antd-mobile";

import {staticUrl} from "../requests";
import LoadingImage from "./loadingImage";

const typeContent = {
    "box": '盒子',
    "object": "物品"
}

export function CardContent(props) {
    let {id, name, image, type, count, date} = props;

    let rHistory = useHistory();

    return (
        <Card onClick={() => {
            rHistory.push(`/${type}/` + id);
        }}>
            <Card.Header title={name} extra={"数量：" + (count || 1)}/>
            <Card.Body style={{paddingBottom: "15px"}}>
                <div className="img-card-rect">
                    <LoadingImage src={staticUrl(image)} alt="图片"/>
                </div>
            </Card.Body>
            <Card.Footer content={"类型：" + (typeContent[type] || "未知")} extra={date}/>
        </Card>
    )
}

export function ContentList(props) {
    let {data} = props;

    return (
        <ul className="content-list">
            {data.map(obj => {
                return (
                    <li key={obj.id}>
                        <CardContent {...obj}/>
                    </li>
                )
            })}
        </ul>
    );
}